<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #baidu_link {
            font-size: xx-large;


        }

        a:link {
            color: #FF0000;
        }

        a:visited {
            color: #00FF00;
        }

        a:hover {
            color: #FF00FF;
        }

        a:active {
            color: #0000FF;
        }

        li:first-child {
            color: red;
        }

        input:focus {
            background-color: yellow;
        }

        input:checked {
            outline: 5px solid green;

        }

        #article{

            cursor: pointer;
            margin: 0px auto;
            width: 280px;
            height: 120px;
            text-align: center;
            color: #666;
            font-size: medium;
            line-height: 120px;
            border: 1px solid #ccc;
            border-radius: 12px;
        }

        #article:hover{
            -moz-box-shadow:2px 2px 10px #e1eaf5;
            -webkit-box-shadow:2px 2px 10px #e1eaf5;
            /*box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色*/
            box-shadow:2px 2px 10px #e1eaf5;
        }

    </style>
</head>
<body>
<h1>伪类选择器案例</h1>
<hr>

<a href="https://www.baidu.com" target="_blank" id="baidu_link">百度网</a>
<br>

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>

<form action="" method="get">
    用户名: <input type="text" name="username"/><br>
    密码: <input type="password" name="password"/><br>
    爱好:<input type="checkbox" name="favorites" value="music">音乐 <input type="checkbox" name="favorites" value="movie"/>电影<input
        type="checkbox" name="favorites" value="soccer"/>足球<br/>
    <input type="submit" value="提交"/>
</form>

<hr>

<div id="article">
    Python3基础教程(四十三)
</div>

</body>
</html>